<!DOCTYPE html>
<html>

<head>
	<title>小水滴</title>
	<meta name="keywords"  />
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<!-- Custom Theme files 1280*559-->
  	<link href="/static/js/layui/css/layui.css" rel="stylesheet">
	  <link href="/static/js/layui/css/form.css" rel="stylesheet">
	<!-- //Custom Theme files -->
	<!-- 青、赤、黄、白、黑 -->
  	<script src="/static/js/layui/layui.js"></script>
  	<script src="/static/js/common.js"></script>
	<script> var iframe = 'userAdd'; </script>
</head>

<body class="win-page">
	<div class="layui-form edit" lay-filter="edit" >
		<div class="layui-form-item">
			<label class="layui-form-label required">归属项目</label>
			<div class="layui-input-block">
				<select name="projectId" lay-filter="projectId" lay-search="" lay-verify="required"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required">归属应用</label>
			<div class="layui-input-block">
				<select name="appId" lay-filter="appId" lay-search="" lay-verify="required"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required">归属任务</label>
			<div class="layui-input-block">
				<select name="taskId" lay-filter="taskId" lay-search="" lay-verify="required"></select>
			</div>
		</div>
		
		<div class="layui-form-item" ele="end">
			<label class="layui-form-label"></label>
			<div class="layui-input-block win-btns">
				<button class="layui-btn layui-btn-sm" type="submit" lay-submit lay-filter="save" id="save">保存</button>
				<button class="layui-btn layui-btn-sm" id="close">关闭</button>
			</div>
		</div>
	</div>
</body>
<script>
	var userLists = [];
	$(function(){
		$('input[name="name"]').focus();
		
	});

	function addClickFn(){
		addUserTaskTpl();
		var rootEle = $('.layui-form-item[tpl="en"]:last');
		rootEle.find('.layui-icon-addition').removeClass('layui-icon-addition').addClass('layui-icon-subtraction');
		rootEle.find('.layui-icon-subtraction').click(function(){
			rootEle.remove();
		});
	}

	function addUserTaskTpl(){
		$('.layui-form-item[ele="end"]').before($('#userTaskTpl').html());

		var rootEle = $('.layui-form-item[tpl="en"]:last');

		var ele = rootEle.find('select[name="userId"]');
		ele.empty();
		ele.append('<option value="">请选择或搜索</option>');
		for( var i=0 ; i<userLists.length ; i++ ){
			var row = userLists[i];
			ele.append('<option value="'+row.id+'">'+row.name+'</option>');
		}
		form.render(ele);

		laydate.render({elem:rootEle.find('input[name="startDate"]')});
		laydate.render({elem:rootEle.find('input[name="endDate"]')});
	}

	$('#close').click(function(){
		c.closePopWindow('userAdd');
	});

	$('#save').click(function(){
		form.on('submit(save)', function(data){
			// form 验证通过才会进来
			var field = data.field;
			var rps = c.getRequestParams();

			var url = 'userTask/add';
			field.id = rps.id ? rps.id : '';

			var userTasks = [];
			$('.layui-form-item[tpl="en"]').each(function(){
				var userId = $(this).find('select[name="userId"]').val();
				var startDate = $(this).find('input[name="startDate"]').val();
				var endDate = $(this).find('input[name="endDate"]').val();
				var remarks = $(this).find('input[name="remarks"]').val();
				var index = userTasks.length;
				field['userTasks['+index+'].sortNum'] = index + 1;
				field['userTasks['+index+'].userId'] = userId;
				field['userTasks['+index+'].startTime'] = startDate;
				field['userTasks['+index+'].stopTime'] = endDate;
				field['userTasks['+index+'].remarks'] = remarks;
				
				userTasks.push({userId:userId,startTime:startDate,stopTime:endDate,remarks:remarks});
			});

			c.request(url,field,function(resp){
				if( resp.code == 200 ){
					c.message('保存成功',parent.layer);
					parent.reloadTable();
					c.closePopWindow('userAdd');
				}else{
					c.message(resp.message);
				}
			});
			
			return false; // 阻止默认 form 跳转
		});
	});

	c.request('project/page',{page:1,limit:1000},function(resp){
		if( resp.code == 0 ){
			var ele = $('select[name="projectId"]');
			var list = resp.data.list;
			ele.empty();
			ele.append('<option value="">请选择或搜索</option>');
			for( var i=0 ; i<list.length ; i++ ){
				var row = list[i];
				ele.append('<option value="'+row.id+'">'+row.name+'</option>');
			}
			form.render(ele);
			initPage();
		}else{
			c.message(resp.message);
		}
	});

	var rps = c.getRequestParams();
	function initPage(){
		if( rps.id ){
			c.request('task/get',{id:rps.id},function(resp){
				if( resp.code == 200 ){
					var task = resp.data;
					loadApp(task.projectId,function(){
						loadTask(task.appId,function(){
							task.taskId = task.id;
							form.val('edit',task);
							loadUserTaskDetails();
						});
					});
				}else{
					c.message(resp.message);
				}
			});

		}else{
			c.request('user/page',{page:1,limit:1000},function(resp){
				if( resp.code == 0 ){
					userLists = resp.data.list;
					addUserTaskTpl();
					$('.layui-icon-addition').click(addClickFn);
				}else{
					c.message(resp.message);
				}
			});
			
		}
	}

	function loadUserTaskDetails(){
		c.request('user/page',{page:1,limit:1000},function(resp){
			if( resp.code == 0 ){
				userLists = resp.data.list;
				addUserTaskTpl();
				$('.layui-icon-addition').click(addClickFn);
			}else{
				c.message(resp.message);
			}

			c.request('userTask/get',{id:rps.id},function(resp){
				if( resp.code == 200 ){
					// ele 
					var count = resp.data.length-1;
					if( count > 0 ){
						for( var i=0 ; i<count ; i++ ){
							addClickFn();
						}
					}

					// value
					for( var i=0 ; i<resp.data.length ; i++ ){
						var row = resp.data[i];
						var rele = $('.layui-form-item[tpl="en"]').eq(i);
						rele.find('select[name="userId"]').val(row.userId);

						var startDate = row.startTime ? row.startTime.substr(0,10) : '';
						var endDate = row.stopTime ? row.stopTime.substr(0,10) : '';
						rele.find('input[name="startDate"]').val(startDate);
						rele.find('input[name="endDate"]').val(endDate);
						rele.find('input[name="remarks"]').val(row.remarks);
						form.render(rele.find('select[name="userId"]'));
					}
					
				}else{
					c.message(resp.message);
				}
			});
		});
	}


	form.on('select(projectId)', function(data){
		loadApp();
	});

	form.on('select(appId)', function(data){
		loadTask();
	});

	function loadTask(targetAppId,callback){
		var appId = targetAppId ? targetAppId : $('select[name="appId"]').val();

		c.request('task/page',{page:1,limit:1000,'task.appId':appId},function(resp){
			if( resp.code == 0 ){
				var ele = $('select[name="taskId"]');
				var list = resp.data.list;
				ele.empty();
				ele.append('<option value="">请选择或搜索</option>');
				for( var i=0 ; i<list.length ; i++ ){
					var row = list[i];
					ele.append('<option value="'+row.id+'">'+row.name+'</option>');
				}
				form.render(ele);
				if(callback)callback();
			}else{
				c.message(resp.message);
			}
		});
	}

	function loadApp(targetProjectId,callback){
		var projectId = targetProjectId ? targetProjectId : $('select[name="projectId"]').val();

		c.request('app/page',{page:1,limit:1000,'app.projectId':projectId},function(resp){
			if( resp.code == 0 ){
				c.request('app/page',{page:1,limit:1000,'app.projectId':'-1'},function(resp2){
					if( resp.code == 0 ){
						var ele = $('select[name="appId"]');
						var list = resp.data.list.concat(resp2.data.list);
						ele.empty();
						ele.append('<option value="">请选择或搜索</option>');
						for( var i=0 ; i<list.length ; i++ ){
							var row = list[i];
							ele.append('<option value="'+row.id+'">'+row.name+'</option>');
						}
						form.render(ele);
						if(callback)callback();
					}else{
						c.message(resp.message);
					}
				});
			}else{
				c.message(resp.message);
			}
		});
	}

</script>
<script type="text/x-template" id="userTaskTpl">
	<div class="layui-form-item" tpl="en">
		<label class="layui-form-label required">参与人员</label>
		<div class="layui-input-block">
			<div style="width:150px;display: inline-block;">
				<select name="userId" lay-filter="userId" autocomplete="off" lay-search="" lay-verify="required"></select>
			</div>
			<div style="display: inline-block;">
				时间从
			</div>
			<div style="width:150px;display: inline-block;">
				<input type="text" name="startDate" autocomplete="off" class="layui-input" placeholder="请选择">
			</div>
			<div style="display: inline-block;">
				到
			</div>
			<div style="width:150px;display: inline-block;">
				<input type="text" name="endDate" autocomplete="off" class="layui-input" placeholder="请选择">
			</div>
			<div style="display: inline-block;">
				备注
			</div>
			<div style="width:200px;display: inline-block;">
				<input type="text" name="remarks" autocomplete="off" class="layui-input" placeholder="请输入备注">
			</div>
			<div style="width:150px;display: inline-block;padding-left: 8px;height: 38px;line-height: 38px;">
				<i class="layui-icon layui-icon-addition ut-icon"></i>
			</div>
		</div>
	</div>
</script>
</html>